<template>
  <div>
    <a-drawer :visible="visible" centered :width="newwindowWidth" @close="onClose" :closable="true" title="推荐搭配" placement="right" :destroyOnClose="true" :maskClosable="false">
      <a-spin tip="Loading..." :spinning="loadingPage" size="large" class="loading-page" />
      <template v-if="!loadingPage">
        <a-list item-layout="horizontal" :data-source="dataSource">
          <a-list-item slot="renderItem" slot-scope="item, index" class="look-item">
            <div class="top">
              <div class="look-title">
                <h3>{{ item.look.name }}</h3>
                <span class="rank rank-s" v-if="item.look.level == 10">S级</span>
                <span class="rank rank-a" v-if="item.look.level == 20">A级</span>
                <span class="rank rank-b" v-if="item.look.level == 30">B级</span>
              </div>
              <div class="right">
                <span class="tip" v-if="ifEmpty(item.productList)"> LOOK中有商品无库存，请单件{{ isBox ? '加购' : '发送' }} </span>
                <a-button icon="plus" class="all-add" @click="addAllLook(item.productList)" :disabled="ifEmpty(item.productList)" v-if="isBox">全部加购</a-button>
                <a-button class="all-add" :disabled="ifEmpty(item.productList) || item.galleryList == null || item.galleryList.length == 0" v-if="!isBox" @click="sendMultiProduct(item)"
                  >发送搭配</a-button
                >
              </div>
            </div>
            <div class="bottom">
              <div
                class="imgs"
                @click="openBigImg(galleryList(item.galleryList))"
                :style="{ cursor: galleryList(item.galleryList).length > 0 ? 'pointer' : 'default' }"
                v-if="galleryList(item.galleryList).length > 0"
              >
                <img :src="galleryList(item.galleryList).length > 0 ? galleryList(item.galleryList)[0].url : ''" alt="" />
                <span class="nums">{{ galleryList(item.galleryList).length }}</span>
              </div>
              <div class="imgs four-imgs" v-else>
                <img :src="img" v-for="(img, imgIndex) of productImgs(item.productList)" alt="" :key="imgIndex" class="small-img" />
                <div class="vertical"></div>
                <div class="horizontal"></div>
              </div>
              <div class="product-list" v-if="item.productList.length <= newlen">
                <div class="goods" v-for="(good, goodIndex) in item.productList" :key="goodIndex">
                  <img :src="good.currentSku.imgUrl ? good.currentSku.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" @click="openDetail(good)" />
                  <p class="tag yellow" v-if="good.tagStatus == 1">搭配过</p>
                  <p class="tag yellow" v-else-if="good.tagStatus == 2">搭配过同款</p>
                  <p class="tag red" v-else-if="good.tagStatus == 3">购买过</p>
                  <p class="tag red" v-else-if="good.tagStatus == 4">购买过同款</p>
                  <p class="tag green" v-else-if="good.tagStatus == 5">加购过</p>
                  <h4>
                    <span class="topping" v-if="good.topTags && good.topTags.length > 0">{{ good.topTags[0] }}</span>
                    <ellipsis :length="good.topTags && good.topTags.length > 0 ? 12 : 16" tooltip style="color: #40a9ff">{{ good.productName }}</ellipsis>
                  </h4>
                  <p class="spu">
                    款号：<ellipsis :length="9" tooltip>{{ good.productCode }}</ellipsis>
                  </p>
                  <p class="price">
                    <a-skeleton :loading="loadingPrice" active style="" :paragraph="false">
                      <span class="red">¥{{ good.promotionPrice != '' ? good.promotionPrice.toFixed(2) : good.promotionPrice }}</span>
                      <span class="origin" style="text-decoration: line-through;margin-left:8px;">¥{{ good.price != '' ? good.price.toFixed(2) : item.price }}</span>
                    </a-skeleton>
                  </p>
                  <template v-if="isBox">
                    <p class="stock">库存：{{ good.currentSku.stock }}<span class="neitao" v-if="good.currentSku.ifEb">内淘</span></p>
                    <div class="chose-sku">
                      <a-cascader
                        :options="good.skuOptions"
                        :default-value="[good.currentSku.colorNo, good.currentSku.sizeNo]"
                        :allowClear="false"
                        :disabled="good.skus.length == 0"
                        @change="v => skuOnChange(v, good, index, goodIndex)"
                      />
                      <!-- @popupVisibleChange="v => skuPopVisible(v, good)"
                    :popupVisible="good.pop" -->
                    </div>
                    <a-skeleton :loading="loadingBtn" active style="" :paragraph="false">
                      <a-button type="primary" block disabled style="height: 24px;width:136px;" v-if="good.preSales">预售</a-button>
                      <a-button
                        type="primary"
                        icon="plus"
                        :loading="good.iconLoading"
                        style="height: 24px;width:136px;"
                        @click="addGoods(good, index)"
                        block
                        :disabled="good.skus.length == 0 || good.currentSku.id === ''"
                        v-else
                      ></a-button>
                    </a-skeleton>
                  </template>
                  <template v-if="!isBox">
                    <a-tooltip placement="topLeft" overlayClassName="bgc_tooltip" :overlayStyle="{ maxWidth: '300px' }" trigger="click">
                      <template slot="title">
                        <div class="tooltipwrap_left">
                          <span>颜色</span>
                          <span v-for="(newsize, newindex2) in good.skuOptions[0].children" :key="newindex2">{{ newsize.label }}</span>
                        </div>
                        <div class="tooltipwrap_right">
                          <div v-for="(newcolor, newindex) in good.skuOptions" :key="newindex">
                            <span :class="{ checked: newcolor.value == good.currentSku.colorNo }">{{ newcolor.value }}/{{ newcolor.label }}</span>
                            <span v-for="(newstock, newstockindex) in newcolor.children" :key="newstockindex">{{ newstock.stock }}</span>
                          </div>
                        </div>
                      </template>
                      <a style="margin-bottom:10px;display:block;width:60px;">查看库存</a>
                    </a-tooltip>
                    <a-button
                      type="primary"
                      :loading="good.iconLoading"
                      style="height: 24px;width:136px;"
                      block
                      :disabled="good.skus.length == 0 || good.currentSku.id === ''"
                      @click="sendSingleProduct(good, $event)"
                      >发送商品</a-button
                    >
                  </template>
                </div>
              </div>
              <!-- 
              slidesToShow: Number 每页显示条数
              slidesToScroll：Number 每次滑动4条
              infinite：Boolean 非无限循环
            -->
              <a-carousel arrows :dots="false" :slidesToShow="newlen" :slidesToScroll="newlen" :infinite="false" style="margin-left: 40px" v-else>
                <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
                  <a-icon type="left-circle" theme="filled" />
                </div>
                <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                  <a-icon type="right-circle" theme="filled" />
                </div>
                <!-- <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
              <a-icon type="left-circle" />
            </div>
            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
              <a-icon type="right-circle" />
            </div> -->
                <div class="goods" v-for="(good, goodIndex) in item.productList" :key="goodIndex">
                  <img :src="good.currentSku.imgUrl ? good.currentSku.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" @click="openDetail(good)" />
                  <p class="tag yellow" v-if="good.tagStatus == 1">搭配过</p>
                  <p class="tag yellow" v-else-if="good.tagStatus == 2">搭配过同款</p>
                  <p class="tag red" v-else-if="good.tagStatus == 3">购买过</p>
                  <p class="tag red" v-else-if="good.tagStatus == 4">购买过同款</p>
                  <p class="tag green" v-else-if="good.tagStatus == 5">加购过</p>
                  <h4>
                    <span class="topping" v-if="good.topTags && good.topTags.length > 0">{{ good.topTags[0] }}</span>
                    <ellipsis :length="good.topTags && good.topTags.length > 0 ? 12 : 16" tooltip style="color: #40a9ff">{{ good.productName }}</ellipsis>
                  </h4>
                  <p class="spu">
                    款号：<ellipsis :length="9" tooltip>{{ good.productCode }}</ellipsis>
                  </p>
                  <p class="price">
                    <a-skeleton :loading="loadingPrice" active style="" :paragraph="false">
                      <span class="red">¥{{ good.promotionPrice != '' ? good.promotionPrice.toFixed(2) : good.promotionPrice }}</span>
                      <span class="origin" style="text-decoration: line-through;margin-left:8px;">¥{{ good.price != '' ? good.price.toFixed(2) : item.price }}</span>
                    </a-skeleton>
                  </p>
                  <template v-if="isBox">
                    <p class="stock">库存：{{ good.currentSku.stock }}<span class="neitao" v-if="good.currentSku.ifEb">内淘</span></p>
                    <div class="chose-sku">
                      <a-cascader
                        :options="good.skuOptions"
                        :default-value="[good.currentSku.colorNo, good.currentSku.sizeNo]"
                        :allowClear="false"
                        :disabled="good.skus.length == 0"
                        @change="v => skuOnChange(v, good, index, goodIndex)"
                      />
                      <!-- :popupVisible="good.pop"
                    @popupVisibleChange="v => skuPopVisible(v, good)" -->
                    </div>
                    <a-skeleton :loading="loadingBtn" active style="" :paragraph="false">
                      <a-button type="primary" block disabled style="height: 24px;width:136px;" v-if="good.preSales">预售</a-button>
                      <a-button
                        type="primary"
                        icon="plus"
                        :loading="good.iconLoading"
                        style="height: 24px;width:136px;"
                        @click="addGoods(good, index)"
                        block
                        :disabled="good.skus.length == 0 || good.currentSku.id === ''"
                        v-else
                      ></a-button>
                    </a-skeleton>
                  </template>
                  <template v-if="!isBox">
                    <a-tooltip placement="topLeft" overlayClassName="bgc_tooltip" :overlayStyle="{ maxWidth: '300px' }" trigger="click">
                      <template slot="title">
                        <div class="tooltipwrap_left">
                          <span>颜色</span>
                          <span v-for="(newsize, newindex2) in good.skuOptions[0].children" :key="newindex2">{{ newsize.label }}</span>
                        </div>
                        <div class="tooltipwrap_right">
                          <div v-for="(newcolor, newindex) in good.skuOptions" :key="newindex">
                            <span :class="{ checked: newcolor.value == good.currentSku.colorNo }">{{ newcolor.value }}/{{ newcolor.label }}</span>
                            <span v-for="(newstock, newstockindex) in newcolor.children" :key="newstockindex">{{ newstock.stock }}</span>
                          </div>
                        </div>
                      </template>
                      <a style="margin-bottom:10px;display:block;width:60px;">查看库存</a>
                    </a-tooltip>
                    <a-button
                      type="primary"
                      :loading="good.iconLoading"
                      style="height: 24px;width:136px;"
                      block
                      :disabled="good.skus.length == 0 || good.currentSku.id === ''"
                      @click="sendSingleProduct(good, $event)"
                      >发送商品</a-button
                    >
                  </template>
                </div>
              </a-carousel>
            </div>
          </a-list-item>
        </a-list>
      </template>
    </a-drawer>
    <!-- 大图 -->
    <BigImg :visibleImgs="visibleImgs" :imgList="imgList" @closeBig="closeBig"></BigImg>
    <!-- 商详 -->
    <GoodInfoModal ref="goodInfoModal" :weid="weid" :modalWidth="isBox ? '60vw' : '80vw'" :isBox="isBox" @sendProduct="sendProduct"></GoodInfoModal>
  </div>
</template>
<script>
import { Ellipsis } from '@/views/box/components'
import BigImg from '@/views/box/components/UserMsg/bigImg'
import GoodInfoModal from '../../../components/GoodInfoModal'
import { productInLooks, queryStock, addStylingCart, addBatchStylingCart, findByLookIds, queryWeMoProductIds, batchTagsByUnionIdAndskc } from '@/api/box/workbench'
import { batchGetProductPromotionPrice } from '@/api/box/api'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  props: {
    storeId: { type: String },
    unionId: { type: String },
    isEmit: {
      type: Boolean,
      default: false,
      required: false
    },
    isBox: {
      type: Boolean,
      default: true,
      required: false
    },
    isLookId: {
      type: Boolean,
      default: false,
      required: false
    },
    storeIdByLink: {
      type: [String, Number],
      default: null,
      required: false
    },
    weid: {
      type: [String, Number],
      default: null,
      required: false
    }
  },
  data() {
    return {
      visible: false,
      dataSource: [],
      visibleImgs: false,
      imgList: [],
      product: {},
      userInfo: Vue.ls.get(USER_INFO),
      loadingPrice: false,
      dataSourceString: '',
      loadingPage: true,
      windowWidth: document.documentElement.clientWidth,
      newwindowWidth: 880,
      newlen: 4,
      loadingBtn: true
    }
  },
  components: {
    Ellipsis,
    BigImg,
    GoodInfoModal
  },
  computed: {
    galleryList() {
      return list => {
        if (list && list.length > 0) {
          return list.filter(e => e.type == 0)
        } else {
          return []
        }
      }
    },
    ifEmpty() {
      return list => {
        let hasPre = list.filter(e => e.preSales)
        if (hasPre.length > 0) {
          return true
        }
        let emptySkus = list.filter(e => e.skus.length == 0)
        if (emptySkus.length > 0) {
          return true
        } else {
          let arr = []
          for (let item of list) {
            let empty = item.skus.filter(i => i.stock == 0)
            if (empty.length == item.skus.length) {
              arr.push(item.id)
            }
          }
          if (arr.length > 0) {
            return true
          } else {
            return false
          }
        }
      }
    },
    productImgs() {
      return list => {
        let imgs = list.map(e => e.extend.productImage)
        imgs = imgs.slice(0, 4)
        return imgs
      }
    }
  },
  watch: {
    dataSourceString: {
      handler(newValue) {
        if (newValue != '') {
          this.dataSource = JSON.parse(newValue)
        } else {
          this.dataSource = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    const that = this
    if (that.windowWidth <= 900) {
      that.newwindowWidth = '92%'
      that.newlen = 3
      if (that.windowWidth <= 730) {
        that.newlen = 2
      }
      if (that.windowWidth <= 570) {
        that.newlen = 1
      }
    } else {
      that.newwindowWidth = 880
      that.newlen = 4
    }
  },
  methods: {
    onClose() {
      window.removeEventListener('resize', this.resize, false)
      this.visible = false
      this.dataSource = []
      this.dataSourceString = ''
    },
    async show(record) {
      window.addEventListener('resize', this.resize, false)
      this.loadingPage = true
      this.visible = true
      this.product = record
      this.loadingPrice = true
      if (!this.isLookId) {
        await this.fetchData()
      } else {
        await this.fetchDataById()
      }

      // 查询库存
      if (this.dataSource.length > 0) {
        // let allSkus = []
        let allStock = []
        for (let item of this.dataSource) {
          let productList = item.productList
          let itemStock = []

          let skus = []
          for (let goods of productList) {
            goods.skus = item.goodsSkcResps.filter(e => e.id == goods.productId).length > 0 ? item.goodsSkcResps.filter(e => e.id == goods.productId)[0].skus : []
            let arr = goods.skus.map(e => e.id)
            skus = [...skus, ...arr]
          }
          if (this.isBox) {
            // BOX库存
            itemStock = await this.getStock(skus)
          } else {
            // 微商城POS库存
            itemStock = await this.getSkuStock(skus, this.storeIdByLink, this.weid)
          }

          allStock = [...allStock, ...itemStock]
          // allSkus = [...allSkus, ...skus]
        }

        await this.getFinalList(allStock)
      }
      this.loadingPage = false
      // 查询价格
      if (this.dataSource.length > 0) {
        // let spuList = []
        let priceList = []
        for (let look of this.dataSource) {
          let arr = look.productList.map(e => {
            return { spuId: e.productId }
          })
          let itemPrice = await this.getPromotionPrice(arr)
          priceList = [...priceList, ...itemPrice]
          // spuList = [...spuList, ...arr]
        }
        // let priceList =
        if (priceList.length > 0) await this.updatePrice(priceList)
      }

      /* 查询标签 */
      this.loadingBtn = true
      for (let look of this.dataSource) {
        let pcs = look.productList.map(item => {
          return `${item.productCode},${item.currentSku.colorNo}`
        })
        let resultTags = await this.getBatchTags(pcs)
        if (resultTags.code == 0) {
          if (!this.isBox) {
            // 微商城
            for (let item of look.productList) {
              let tagItem = resultTags.data.filter(e => e.productCode == item.productCode && e.productColor == item.currentSku.colorNo)[0]
              item.tagStatus = tagItem.status
              item.inLook = tagItem.inLook
            }
          } else {
            for (let item of look.productList) {
              let tagItem = resultTags.data.filter(e => e.productCode == item.productCode && e.productColor == item.currentSku.colorNo)[0]
              item.preSales = tagItem.preSales
              item.topTags = tagItem.topTags
            }
          }
          console.log(look.productList)
        } else {
          this.$message.warning(resultTags.msg)
        }
      }
      this.loadingBtn = false
      this.$forceUpdate()
    },
    fetchData() {
      let params = {
        requestData: {
          colorNo: this.product.colorNo,
          productCode: this.product.productCode
        },
        page: {
          pageNo: 1,
          pageSize: 100
        }
      }
      return productInLooks(params).then(res => {
        if (res.code == 0) {
          this.dataSource = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 更加lookId查询look
    fetchDataById() {
      let params = {
        requestData: {
          lookIds: [this.product.id]
        },
        page: {
          pageNo: 1,
          pageSize: 100
        }
      }
      return findByLookIds(params).then(res => {
        if (res.code == 0) {
          this.dataSource = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 查询库存
    getStock(sku) {
      if (sku.length == 0) return []
      const data = {
        requestData: {
          skuIds: sku,
          boxStock: this.storeId === '417608',
          unionId: this.unionId
        }
      }
      return queryStock(data)
        .then(res => {
          if (res.code === 0) {
            return res.data
          } else {
            this.$message.error(res.msg)
            return []
          }
        })
        .catch(err => {
          console.log('getStock:' + err)
        })
    },
    // 批量查询sku库存 for:POS+
    getSkuStock(skuIds, storeId, weid) {
      const data = {
        requestData: {
          weId: weid,
          skuIds: skuIds,
          storeId: storeId
        }
      }
      return queryStock(data)
        .then(res => {
          if (res.code === 0) {
            return res.data
          } else {
            this.$message.error(res.msg)
            return false
          }
        })
        .catch(err => {
          console.log('getSkuStock:' + err)
        })
    },
    // 批量查询优惠价
    getPromotionPrice(list) {
      let data = {
        requestData: {
          productList: list,
          unionId: this.unionId
        }
        // user_id: this.userInfo.id
      }
      return batchGetProductPromotionPrice(data)
        .then(res => {
          if (res.code == 0) {
            return res.data.productList
          } else {
            this.$message.error(res.msg)
            return []
          }
        })
        .catch(err => {
          console.log('ProductPromotionPrice:' + err)
        })
    },
    // 处理sku及库存
    getFinalList(allStock) {
      for (let item of this.dataSource) {
        let productList = item.productList
        for (let goods of productList) {
          goods.extend = JSON.parse(goods.extendJson)
          goods.productName = goods.extend.productName
          goods.productBrand = goods.extend.productBrand
          goods.promotionPrice = -1
          goods.price = -1
          goods.pop = false
          goods.iconLoading = false
          let skusList = goods.skus
          // 处理库存
          for (let sku of skusList) {
            let result = allStock.filter(e => e.skuId == sku.id)
            if (result.length > 0) {
              sku.stock = result[0].stock > 0 ? result[0].stock : 0
              sku.ifEb = result[0].ifEb
            } else {
              sku.stock = 0
              sku.ifEb = false
            }
          }

          // 处理联级skuOptions
          let skuOptions = []
          goods.colorList = this.filterSizeColor(skusList, [], 'color')
          let sizeList = this.filterSizeColor(skusList, [], 'size')
          let sizeOption = []
          for (let size of sizeList) {
            let children = {
              label: size.size_name,
              value: size.sizeno
            }
            sizeOption.push(children)
          }

          for (let option of goods.colorList) {
            let item = { value: option.colorno, label: option.color_name, children: JSON.parse(JSON.stringify(sizeOption)), disabled: false }
            for (let size of item.children) {
              let result = skusList.filter(e => e.colorno == option.colorno && e.sizeno == size.value)
              if (result.length > 0) {
                size.skuId = result[0].id
                size.stock = result[0].stock
                size.disabled = result[0].stock == 0 ? true : false
                size.imgUrl = result[0].imgurl
              }
            }
            skuOptions.push(item)
          }
          // console.log(skuOptions)
          goods.skuOptions = skuOptions
          // 处理初始默认sku
          if (skuOptions.length > 0) {
            let defaultSku = skuOptions.filter(i => i.value == goods.productColor)[0].children.filter(j => j.stock > 0)
            if (defaultSku.length > 0) {
              let ifEb = skusList.filter(e => e.id == defaultSku[0].skuId)[0].ifEb
              // 默认skc有库存
              goods.currentSku = {
                stock: defaultSku[0].stock,
                colorNo: goods.productColor,
                sizeNo: defaultSku[0].value,
                id: defaultSku[0].skuId,
                imgUrl: defaultSku[0].imgUrl,
                ifEb: ifEb
              }
            } else {
              let checkAllStock = skusList.filter(a => a.stock == 0)
              if (checkAllStock.length == skusList.length) {
                // 全部sku stock 为0
                goods.currentSku = { stock: '', colorNo: goods.productColor, sizeNo: '', id: '', imgUrl: goods.extend.productImage }
              } else {
                let hasStock = []
                for (let item of skuOptions) {
                  let result = item.children.filter(e => e.stock > 0)
                  hasStock = [...hasStock, ...result]
                }
                if (hasStock.length > 0) {
                  let color = goods.skus.filter(i => i.id == hasStock[0].skuId)
                  goods.currentSku = { stock: hasStock[0].stock, colorNo: color[0].colorno, sizeNo: hasStock[0].value, id: hasStock[0].skuId, imgUrl: color[0].imgUrl, ifEb: color[0].ifEb }
                }
              }
            }
          } else {
            // 无sku
            goods.currentSku = { stock: '', colorNo: goods.productColor, sizeNo: '', id: '', imgUrl: goods.extend.productImage }
          }
        }
      }
      // console.log(this.dataSource)
    },
    // 更新商品价格
    updatePrice(priceList) {
      for (let look of this.dataSource) {
        let productList = look.productList
        for (let good of productList) {
          let result = priceList.filter(e => parseInt(e.spuId) == good.productId)
          if (result.length > 0) {
            good.price = result[0].price
            good.promotionPrice = result[0].promotionPrice
          } else {
            good.price = ''
            good.promotionPrice = ''
          }
        }
      }
      // console.log(this.dataSource)
      this.loadingPrice = false
      this.$forceUpdate()
    },
    // 筛选颜色尺码组
    filterSizeColor(data, list, type) {
      switch (type) {
        case 'color':
          const tempArr = list.map(item => item.colorno)
          const colors = data.map(item => {
            const color = {
              color_name: item.color_name,
              colorno: item.colorno
            }
            return color
          })
          for (var i = 0; i < colors.length; i++) {
            var temp = colors[i]
            if (tempArr.indexOf(temp.colorno) === -1) {
              tempArr.push(temp.colorno)
              list.push(temp)
            }
          }
          return list
        case 'size':
          const tempArr2 = list.map(item => item.sizeno)
          const sizes = data.map(item => {
            const size = {
              size_name: item.size_name,
              sizeno: item.sizeno
            }
            return size
          })
          for (var j = 0; j < sizes.length; j++) {
            var temp2 = sizes[j]
            if (tempArr2.indexOf(temp2.sizeno) === -1) {
              tempArr2.push(temp2.sizeno)
              list.push(temp2)
            }
          }
          list.sort(this.compare('sizeno'))
          return list
      }
    },
    // sku级联选择
    async skuPopVisible(value, record) {
      console.log(value, record)
      record.pop = value
      if (value) {
        // record.skuOptions = []
        /*  await this.querySkus(record)
        let skuOptions = []
        let skusList = record.skus
        const skus = skusList.map(item => item.id)
        let stockList = await this.fetchStock(skus)
        for (let item of record.colorList) {
          let newItem = {
            value: item.colorno,
            label: item.color_name,
            children: [],
            disabled: false
          }
          let result = skusList.filter(e => e.colorno == item.colorno)
          if (result.length > 0) {
            for (let sku of result) {
              let stock = stockList.filter(e => e.skuId == sku.id)[0].stock
              let child = {
                value: sku.sizeno,
                label: sku.size_name,
                skuId: sku.id,
                stock: stock,
                disabled: stock == 0 ? true : false
              }
              newItem.children.push(child)
            }
            newItem.children.sort(this.compare('value'))
            let emptySkc = newItem.children.filter(e => e.stock == 0)
            if (emptySkc.length == newItem.children.length) {
              newItem.disabled = true
            }
          } else {
            newItem.disabled = true
          }
          skuOptions.push(newItem)
        }
        console.log(skuOptions, record)
        record.skuOptions = skuOptions */
      }
      record.pop = value
    },
    skuOnChange(value, record, index, goodIndex) {
      // console.log(value, record)
      let sku = record.skus.filter(e => e.colorno == value[0] && e.sizeno == value[1])
      this.dataSource[index].productList[goodIndex].currentSku = {
        stock: sku[0].stock,
        colorNo: sku[0].colorno,
        sizeNo: sku[0].sizeno,
        id: sku[0].id,
        imgUrl: sku[0].imgurl,
        ifEb: sku[0].ifEb
      }
      this.dataSourceString = JSON.stringify(this.dataSource)
      this.$forceUpdate()
    },
    // 尺码排序
    compare(property) {
      return function(a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    // 批量查询用户的商品标签
    getBatchTags(list) {
      let data = {
        requestData: {
          productCodesAndColors: list,
          unionId: this.unionId
        }
      }
      return batchTagsByUnionIdAndskc(data).then(res => {
        return res
      })
    },
    // 批量添加购物车
    addAllLook(list) {
      let checkHasSku = list.filter(i => i.currentSku.id == '')
      if (checkHasSku.length > 0) {
        this.$message.warning('还有商品未选择颜色尺码！')
        return
      }
      let batchList = []
      for (let item of list) {
        let skuId = item.currentSku.id
        let result = item.skus.filter(e => e.id == skuId)
        if (result.length > 0) {
          const newItem = {
            price: item.price,
            productCode: item.productCode,
            productId: item.productId,
            productName: item.productName,
            colorName: result[0].color_name,
            colorNo: result[0].colorno,
            sizeName: result[0].size_name,
            sizeNo: result[0].sizeno,
            imgUrl: result[0].imgurl,
            skuCode: result[0].no,
            skuId: skuId,
            unionId: this.unionId
          }
          batchList.push(newItem)
        }
      }
      if (batchList.length == 0) return
      let params = {
        requestData: batchList,
        user_id: this.userInfo.id
      }
      addBatchStylingCart(params).then(res => {
        if (res.code === 0) {
          this.$message.success('添加成功！')
          this.$emit('refreshShoppingCart', true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 添加商品至购物车
    addGoods(item, index) {
      // console.log(item, index)
      // yu
      if (this.isEmit) {
        item.iconLoading = true
        setTimeout(() => {
          item.iconLoading = false
          this.$emit('add', item)
        }, 300)
        return
      }
      //
      if (item.currentSku.id === '') {
        this.$message.error('请选择尺码！')
      } else if (item.currentSku.stock === 0) {
        this.$message.error('该尺码库存为0！')
      } else {
        item.iconLoading = true
        setTimeout(() => {
          item.iconLoading = false
        }, 2000)
        const sku = item.skus.filter(sku => sku.id === item.currentSku.id)
        console.log(sku)
        const value = {
          colorName: sku[0].color_name,
          colorNo: sku[0].colorno,
          imgUrl: sku[0].imgurl,
          price: item.price,
          productCode: item.productCode,
          productId: item.productId,
          productName: item.productName,
          sizeName: sku[0].size_name,
          sizeNo: sku[0].sizeno,
          skuCode: sku[0].no,
          skuId: sku[0].id,
          // productPrice: sku[0].price,
          unionId: this.unionId
        }

        const data = {
          requestData: value,
          user_id: this.userInfo.id
        }
        addStylingCart(data)
          .then(res => {
            console.log(res)
            if (res.code === 0) {
              this.$message.success('添加成功！')
              this.$emit('refreshShoppingCart', true)
            } else {
              this.$message.error(res.msg, 5)
            }
          })
          .catch(err => {
            console.log('添加商品' + err)
          })
      }
    },
    openBigImg(list) {
      if (list.length == 0) return
      let result = list.map(i => i.url)
      this.imgList = result
      this.visibleImgs = true
    },
    // 关闭大图
    closeBig(value) {
      this.visibleImgs = value
      setTimeout(() => {
        this.imgList = []
      }, 100)
    },
    // 查看商品信息
    openDetail(item) {
      if (item.currentSku.id == '') {
        if (item.skus.length > 0) {
          let result = item.skus.filter(e => e.colorno == item.productColor)
          this.$refs.goodInfoModal.show(item.productId, result[0].id, false)
        } else {
          this.$refs.goodInfoModal.show(item.productId, '', false)
        }
      } else {
        this.$refs.goodInfoModal.show(item.productId, item.currentSku.id)
      }
    },
    // 微盟商品Id
    getwemoIds(list) {
      let params = {
        requestData: {
          storeId: '417608-31066',
          productIdList: list
        }
      }
      if (this.weid) params.requestData.weid = this.weid
      return queryWeMoProductIds(params).then(res => {
        if (res.code == 0) {
          return res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    async sendSingleProduct(item, e) {
      console.log(item)
      let list = await this.getwemoIds([item.productId])
      if (list.length > 0) {
        let obj = {
          weiMoProductId: list[0].weMoProductId,
          value: item.productName,
          cover_imgs: item.currentSku.imgUrl,
          promotionPrice: item.promotionPrice
        }
        e.target.firstElementChild.innerText = '再次发送'
        this.$emit('sendProduct', obj)
      } else {
        this.$message.warning('暂无微盟id')
      }
    },
    // 发送商品
    sendProduct(item) {
      this.$emit('sendProduct', item)
    },
    sendMultiProduct(item) {
      console.log(item)
      let obj = {
        id: item.look.id,
        img: item.galleryList.length == 0 ? '' : item.galleryList[0].url,
        title: item.look.name,
        num: item.productList.length
      }
      this.$emit('sendLook', obj)
    },
    resize() {
      let that = this
      // window.fullHeight = document.documentElement.clientHeight
      window.fullWidth = document.documentElement.clientWidth
      // that.windowHeight = window.fullHeight // 高
      that.windowWidth = window.fullWidth // 宽
      if (that.windowWidth <= 900) {
        that.newwindowWidth = '92%'
        that.newlen = 3
        if (that.windowWidth <= 730) {
          that.newlen = 2
        }
        if (that.windowWidth <= 570) {
          that.newlen = 1
        }
      } else {
        that.newwindowWidth = 880
        that.newlen = 4
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-drawer-body {
  height: calc(100vh - 60px);
  box-sizing: border-box;
  padding: 0 24px;
  .loading-page {
    position: absolute !important;
    top: 20%;
    left: 45%;
  }
}
.look-item {
  padding: 24px 0;
  border-bottom: 1px solid #d9d9d9;
  display: block;
  .top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 16px;
    .look-title {
      display: flex;
      h3 {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        margin-right: 4px;
      }
      .rank {
        width: 30px;
        height: 18px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
        border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        font-size: 10px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 17px;
        text-align: center;
        display: block;
        margin-top: 4px;
        &.rank-s {
          background: linear-gradient(135deg, #eeeeee 0%, #ffa06f 0%, #ff511b 100%);
        }
        &.rank-a {
          background: linear-gradient(135deg, #eeeeee 0%, #ffba00 0%, #ff963a 100%);
        }
        &.rank-b {
          background: linear-gradient(135deg, #eeeeee 0%, #13cff2 0%, #1375f2 100%);
        }
      }
    }
    .right {
      .tip {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff614e;
        margin-right: 8px;
      }
      .all-add {
        border-color: #1890ff;
        color: #1890ff;
        padding: 0 12px;
      }
      .all-add:active {
        border-color: #096dd9;
        color: #096dd9;
      }
      .all-add[disabled] {
        border-color: #d9d9d9;
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    .imgs {
      width: 160px;
      height: 240px;
      position: relative;
      background: #d8d8d8;
      border-radius: 4px;
      overflow: hidden;
      .nums {
        width: 24px;
        height: 24px;
        background: #000000;
        opacity: 0.5;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .small-img {
        width: 50%;
        height: 50%;
        object-fit: scale-down;
        float: left;
        display: block;
      }
      .vertical,
      .horizontal {
        background: #d9d9d9;
        position: absolute;
        z-index: 2;
      }
      .vertical {
        width: 1px;
        height: 100%;
        left: 50%;
      }
      .horizontal {
        height: 1px;
        width: 100%;
        top: 50%;
      }
    }
    .four-imgs {
      border: 1px solid #d9d9d9;
      background: #fff;
    }
    .product-list {
      margin-left: 40px;
      display: flex;
    }
    .goods {
      width: 136px !important;
      margin-right: 20px;
      position: relative;
      h4 {
        line-height: 22px;
      }
      .topping {
        height: 22px;
        border-radius: 2px;
        border: 1px solid #1890ff;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1890ff;
        line-height: 22px;
        padding: 0 4px;
        margin-right: 4px;
        display: block;
        float: left;
        font-weight: normal;
      }
      img {
        display: block;
        width: 100px;
        height: 100px;
        object-fit: scale-down;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        margin-bottom: 4px;
        cursor: pointer;
      }
      .spu {
        margin-bottom: 4px;
      }
      .stock {
        margin-bottom: 4px;
      }
      .chose-sku {
        margin-bottom: 8px;
      }
    }
    .goods:nth-of-type(4n) {
      margin-right: 0;
    }
    .price {
      display: flex;
      align-items: center;
      margin-bottom: 2px;
      .red {
        color: #f45555;
        font-size: 14px;
        line-height: 26px;
      }
      .origin {
        font-size: 12px;
        font-weight: 400;
        color: #8c8c8c;
        line-height: 26px;
      }
    }
  }
}
.look-item:last-of-type {
  border-bottom: none;
}
.neitao {
  width: 30px;
  height: 18px;
  line-height: 18px;
  background: #ffba00;
  border-radius: 4px;
  font-size: 10px;
  color: #1d2741;
  display: inline-block;
  text-align: center;
  margin-left: 6px;
}
.ant-carousel {
  width: calc(100% - 200px);
  // margin-left: 40px;
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  /deep/ .slick-prev {
    left: -30px !important;
    top: 50% !important;
    /* .anticon {
      font-size: 16px;
    } */
  }
  /deep/ .slick-next {
    right: 0px !important;
    top: 50% !important;
    /* .anticon {
      font-size: 16px;
    } */
  }
  .custom-slick-arrow {
    font-size: 25px;
    color: #595959;
    opacity: 1;
    z-index: 2;
    background: #fff;
  }
  /deep/.slick-disabled {
    color: #d9d9d9;
  }
  /deep/ .slick-dots-bottom {
    bottom: 50px;
    li {
      margin: 0 5px;
    }
  }
  /deep/.slick-list {
    .slick-slide {
      pointer-events: auto;
    }
  }
}
// 查看spu库存
.tooltipwrap_left {
  display: flex;
  span {
    display: block;
    text-align: center;
    margin-bottom: 16px;
    width: 50px;
  }
  span:nth-child(1) {
    width: 120px;
    text-align: left;
  }
}
.tooltipwrap_right {
  div {
    display: flex;
    span {
      margin-bottom: 16px;
      display: block;
      text-align: center;
      width: 50px;
    }
    span:nth-child(1) {
      width: 120px;
      text-align: left;
    }
    .checked {
      color: #096dd9;
    }
  }
}
.tag {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0 8px;
  &.red {
    background: #ff7d76;
  }
  &.yellow {
    background: #efb041;
  }
  &.green {
    background: #87d068;
  }
}
</style>

